
<template>
    <div class="rd-pagination">
        <div class="rd-info" v-if="showInfo"></div>
        <div class="rd-jump" v-if="showJump">
            <input type="text" v-model="pageJump" /><span>search</span>
        </div>
        <ul class="rd-page" v-if="showList && pageList.length > 0">
            <li class="item" @click="prev" :class="{'disabled': pageStart == 1}" >
                <span class="iconfont">&#xe617;</span>
            </li>
            <li class="item" :class="{'active': 1 == pageStart}" @click="first">
                <span>1</span>
            </li>
            <li class="jump-prev" @click="jump(-5)"  v-show="pageLimit.max > 10 && pageStart > 4">
                <span></span>
            </li>
            <li class="item" :class="{'active': el == pageStart}" @click="pagePath(el)" v-for="el in pageList" v-if="el">
                <span>{{el}}</span>
            </li>
            <li class="jump-next" @click="jump(5)" v-show="pageLimit.max > 10 && pageStart <= pageLimit.max - 4">
                <span></span>
            </li>
            <li class="item" @click="last" :class="{'active': pageLimit.max == pageStart}" >
                <span>{{pageLimit.max}}</span>
            </li>
            <li class="item" @click="next" :class="{'disabled': pageStart == pageLimit.max}" >
                <span class="iconfont">&#xe618;</span>
            </li>
        </ul>
    </div>
</template>
<script>
let optionsDefault = {
    pageSize: 10,
    remote: {
        pageIndexName: 'pageIndex',
        pageSizeName: 'pageSize',
        params: {},
        url: '',
        totalName: 'total',
        offset: 0
    },
    showInfo: true,
    showJump: true,
    listNumber: 5
}

export default {
    props: {
        options: Object,
        total: Number
    },
    data () {
        return {
            showJump: false,
            showInfo: true,
            pageJump: '',
            pageList: [1],
            pageStart: 1,
            showList: true,
            pageLimit: {
                min: 1,
                max: 10,
                total: 1
            }
        }
    },
    ready () {
        this.$optionsDefault = {}
        Object.assign(this.$optionsDefault, optionsDefault, this.options)
        if (this.url) {
            this.$optionsDefault.remote.url = this.url
        }
        this.initPageList(this.total)
        this.getData(1)
    },
    mounted () {
        this.$optionsDefault = {}
        Object.assign(this.$optionsDefault, optionsDefault, this.options)
        if (this.url) {
            this.$optionsDefault.remote.url = this.url
        }
        this.initPageList(this.total)
        this.getData(1)
    },
    watch: {
        total (val) {
            this.initPageList(val)
        }
    },
    methods: {
        pagePath (pageNumber) {
            this.pageStart = pageNumber
            this.getData()
        },
        first () {
            if (this.pageStart !== 1) {
                this.pageStart = 1
                this.getData()
            }
        },
        last () {
            if (this.pageStart !== this.pageLimit.max) {
                this.pageStart = this.pageLimit.max
                this.getData()
            }
        },
        prev () {
            if (this.pageStart === 1) {
                return
            }
            this.pageStart > this.pageLimit.min ? this.pageStart-- : this.pageStart = 1
            this.getData()
        },
        next () {
            if (this.pageStart === this.pageLimit.max) {
                return
            }
            this.pageStart < this.pageLimit.max ? this.pageStart++ : this.pageStart = this.max
            this.getData()
        },
        jump (pageNumber) {
            this.pageStart = this.pageStart + pageNumber > 1 ? (this.pageStart + pageNumber) : 1
            if (this.pageStart > this.pageLimit.max) {
                this.pageStart = this.pageLimit.max
            }
            this.getData()
        },
        initPageList (total) {
            this.pageLimit.max = Math.ceil(total / this.$optionsDefault.pageSize)
            this.pageListRefresh()
        },
        getData () {
            let params = {
                [this.$optionsDefault.remote.pageIndexName]: this.pageStart + this.$optionsDefault.remote.offset,
                [this.$optionsDefault.remote.pageSizeName]: this.$optionsDefault.pageSize
            }
            Object.assign(params, this.$optionsDefault.remote.params)
            this.$emit('change', params)
            this.pageListRefresh()
        },
        pageListRefresh () {
            let arr = []
            for (let i = 2; i <= this.pageLimit.max - 1; i++) {
                arr.push(i)
            }
            if (this.pageLimit.max === 2) {
                arr.length = 1
                this.pageList = arr
                return
            }
            if (this.pageLimit.max < 10) {
                this.pageList = arr.slice(0, this.pageLimit.max)
                return
            }
            if (this.pageStart < 4) {
                this.pageList = arr.slice(0, 4)
            } else if (this.pageStart > this.pageLimit.max - optionsDefault.listNumber + 2) {
                this.pageList = arr.slice(-4)
            } else {
                let start = this.pageStart - 2 - Math.floor(optionsDefault.listNumber / 2)
                this.pageList = arr.slice(start, start + optionsDefault.listNumber)
            }
        }
    }
}
</script>
<style  rel="stylesheet/scss" type="text/css" lang="scss" scoped>
  .rd-page {
	font-size: 12px;
	text-align:right;
}

.rd-page .item {
	cursor: pointer;
	border-radius: 6px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	min-width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	list-style: none;
	display:inline-block;
	float:none;
	border: 1px solid #ccc;
	background-color: #fff;
	margin-right: 8px;
  .iconfont{
    font-size: 14px;
  }
}

.rd-page .item span {
	margin: 0 6px;
	color: #666
}

.rd-page .item:hover {
	border-color: #5ba3e5
}

.rd-page .item:hover span {
	color: #5ba3e5
}

.rd-page .item.active {
	background-color: #5ba3e5;
	border-color: #5ba3e5
}

.rd-page .item.active span {
	color: #fff
}

.rd-page .item.disabled {
	cursor: not-allowed;
	border-color: #d9d9d9
}

.rd-page .item.disabled span {
	color: #ccc
}

.rd-page .jump-next,.rd-page .jump-prev {
	font-family: Arial;
	cursor: pointer;
	color: #666;
	border-radius: 6px;
	list-style: none;
	min-width: 28px;
	height: 28px;
	line-height: 28px;
	float: left;
	text-align: center;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
	display: inline-block;
	margin-right: 8px
}

.rd-page .jump-next:after,.rd-page .jump-prev:after {
	content: "\2022\2022\2022";
	display: block;
	letter-spacing: 2px;
	color: #ccc;
	text-align: center
}

.rd-page .jump-prev:hover:after {
	content: "\F3D2\F3D2";
	color: #2db7f5;
	display: inline-block;
	zoom: 1;
	letter-spacing: 1px;
	font-family: Ionicons
}

.rd-page .jump-next:hover:after {
	content: "\F3D3\F3D3";
	color: #2db7f5;
	display: inline-block;
	zoom: 1;
	letter-spacing: 1px;
	font-family: Ionicons
}

.rd-page:after {
	display: table;
	content: '';
	height: 0;
	clear: both;
	overflow: hidden
}
</style>
